import React from "react"
import PropTypes from "prop-types"
import { PieChart, Pie, Cell, ResponsiveContainer } from "recharts"
import { colors } from "../utility"

const colorsArr = Object.keys(colors).map(key => colors[key])

function CustomPieChart({ categoryData, title }) {
  if (categoryData.length === 0) {
    return <h3 className="text-center mx-3">{title} 还没有任何数据</h3>
  }
  return (
    <div className="pie-chart-component">
      <h3 className="text-center mt-3">{title}</h3>
      <ResponsiveContainer width='100%' height={300}>
        <PieChart>
          <Pie
            dataKey="value"
            data={categoryData}
            cx={'50%'}
            cy={'50%'}
            labelLine={true}
            label
            outerRadius={100}
            fill={colors.blue}
          >
            {categoryData.map((entry, index) => (
              <Cell key={index} fill={colorsArr[index % colorsArr.length]} />
            ))}
          </Pie>
        </PieChart>
      </ResponsiveContainer>
    </div>
  )
}

CustomPieChart.propTypes = {
  title: PropTypes.string,
  categoryData: PropTypes.array
}

export default CustomPieChart
